<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Penc</title>
  <meta name="description" content="Trackpad-oriented window manager for macOS">
  <meta name="author" content="Deniz Gurkaynak">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="Penc">
  <meta property="og:description" content="Trackpad-oriented window manager for macOS">
  <meta property="og:image" content="https://deniz.co/penc/logo.94ebde8c.png">
  <meta property="og:image:width" content="1024">
  <meta property="og:image:height" content="1024">
  <meta property="og:url" content="https://deniz.co/penc/">
  <meta name="twitter:card" content="summary">

  <link rel="canonical" href="https://deniz.co/penc/" />

  <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  <style>
    /* normalize.css v3.0.2 */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}
    /* Skeleton V2.0.4 */.column,.columns,.container,.u-full-width{width:100%;box-sizing:border-box}h1,h2,h3{letter-spacing:-.1rem}body,h6{line-height:1.6}.container{position:relative;max-width:960px;margin:0 auto;padding:0 20px}ol,p,ul{margin-top:0}.column,.columns{float:left}@media (min-width:400px){.container{width:85%;padding:0}}html{font-size:62.5%}body{font-size:1.5em;font-weight:400;font-family:Raleway,HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:3rem;line-height:1.3}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;letter-spacing:0}@media (min-width:550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}a{color:#1EAEDB}a:hover{color:#0FA0CE}.button,button,input[type=submit],input[type=reset],input[type=button]{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:focus,.button:hover,button:focus,button:hover,input[type=submit]:focus,input[type=submit]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=button]:focus,input[type=button]:hover{color:#333;border-color:#888;outline:0}.button.button-primary,button.button-primary,input[type=submit].button-primary,input[type=reset].button-primary,input[type=button].button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0}.button.button-primary:focus,.button.button-primary:hover,button.button-primary:focus,button.button-primary:hover,input[type=submit].button-primary:focus,input[type=submit].button-primary:hover,input[type=reset].button-primary:focus,input[type=reset].button-primary:hover,input[type=button].button-primary:focus,input[type=button].button-primary:hover{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB}input[type=tel],input[type=url],input[type=password],input[type=email],input[type=number],input[type=search],input[type=text],select,textarea{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box}input[type=tel],input[type=url],input[type=password],input[type=email],input[type=number],input[type=search],input[type=text],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type=tel]:focus,input[type=url]:focus,input[type=password]:focus,input[type=email]:focus,input[type=number]:focus,input[type=search]:focus,input[type=text]:focus,select:focus,textarea:focus{border:1px solid #33C3F0;outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}.button,button,li{margin-bottom:1rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}td,th{padding:12px 15px;text-align:left;border-bottom:1px solid #E1E1E1}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #E1E1E1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}

      .p-center { text-align: center; }

      #header { margin-top: 10%; }
      .logo-container { display: flex; align-items: center; justify-content: center; }
      .logo-container img { width: 3.5em; }
      .logo-container h1 { margin: 0 0 0 0.25em; }
      #header h5 { text-align: center; margin: 1em 1em 0 1em; }
      #header h6 { max-width: 700px; margin: 0.5em auto 0 auto; }
      #download-button-container { margin-top: 1em; }
      #showcase { max-width: 700px; min-height: 292px; margin: 3em auto 4em auto; }
      .showcase-item { border-radius: 5px; padding: 15px 15px; margin: 5px 0 5px 5px; }
      .showcase-item.selected { background: #eee; -webkit-box-shadow: 10px 10px 67px -27px rgba(0,0,0,0.25); -moz-box-shadow: 10px 10px 67px -27px rgba(0,0,0,0.25); box-shadow: 10px 10px 67px -27px rgba(0,0,0,0.25); }
      .showcase-item h6 { text-transform: uppercase; font-size: 1.4rem; letter-spacing: .2rem; font-weight: 600; margin-bottom: 0.25em; }
      .showcase-item p { margin-bottom: 0; }
      #github-button-container { margin-bottom: 3em; }
      .footer { max-width: 700px; margin: 0 auto; border-top: 1px solid #ddd; }
      .footer h6 { font-size: 1.25rem; padding-top: 10px; }
  </style>
  <!-- <link rel="icon" type="image/png" href="images/favicon.png"> -->
</head>
<body>
  <div class="container">

    <div id="header" class="row">
      <div class="logo-container">
        <img src="./assets/logo.png" alt="">
        <h1>Penc</h1>
      </div>

      <h5 class="p-center">Trackpad-oriented window manager for macOS</h5>
      <h6 class="p-center">Penc is yet another window manager app for macOS. Instead of complicated keyboard shortcuts, Penc is designed for trackpad usage. Double press and hold command key to activate Penc. Perform two-finger gestures to move or resize any window. Then release command key to take effect.</h6>
    </div>

    <div id="showcase" class="row">
      <div class="eight columns">

        <div id="showcase-move" class="showcase-item">
          <h6>Moving</h6>
          <p>Drag with two fingers to move the window.</p>
        </div>

        <div id="showcase-pinch" class="showcase-item">
          <h6>Resizing</h6>
          <p>Pinch with two fingers to resize the window.</p>
        </div>

        <div id="showcase-swipe" class="showcase-item">
          <h6>Snapping into halves/quarters</h6>
          <p>Fast swipe with two fingers. Corners for the quarters, sides do halves.</p>
        </div>

      </div>
      <div class="four columns">
        <video id="video" class="u-max-full-width" autoplay muted playsinline></video>
      </div>
    </div>

    <div id="download-button-container" class="row p-center">
      <a id="download-button" class="button button-primary" href="https://github.com/dgurkaynak/Penc/releases">Download Penc</a>
      <a class="button" href="https://github.com/dgurkaynak/Penc">View on Github</a>
    </div>

    <div id="github-button-container" class="row p-center">
      <a class="github-button" href="https://github.com/dgurkaynak/Penc" data-icon="octicon-star" data-show-count="true" aria-label="Star dgurkaynak/Penc on GitHub">Star</a>
      <a class="github-button" href="https://github.com/dgurkaynak/Penc/issues" data-icon="octicon-issue-opened" data-show-count="true" aria-label="Issue dgurkaynak/Penc on GitHub">Issue</a>
    </div>

    <div class="row p-center footer">
      <h6>Copyright © 2018 Deniz Gurkaynak</h6>
    </div>

  </div>

  <script src="./index.js"></script>
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <script type='text/javascript'>
    //some default pre init
    var Countly = window['Countly'] = window['Countly'] || {};
    Countly.q = Countly.q || [];

    //provide countly initialization parameters
    Countly.app_key = 'a9376d7067f58f0e7798a06cf4093bebc00b8b9d';
    Countly.url = 'https://countly.deniz.co';

    Countly.q.push(['track_sessions']);
    Countly.q.push(['track_pageview']);
    Countly.q.push(['track_errors']);

    //load countly script asynchronously
    (function() {
       var cly = document.createElement('script'); cly.type = 'text/javascript';
       cly.async = true;
       //enter url of script here
       cly.src = 'https://countly.deniz.co/sdk/web/countly.min.js';
       cly.onload = function(){Countly.init()};
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cly, s);
    })();
  </script>
</body>
</html>
